<template>
  <div class="min-h-screen h-dvh flex flex-col bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 text-gray-900 overflow-hidden">
    <!-- 顶部栏 -->
    <header class="safe-top sticky top-0 z-30 bg-white/95 backdrop-blur-xl border-b border-gray-200/50 shadow-lg h-14">
      <div class="max-w-6xl mx-auto px-4 h-full flex items-center justify-between">
        <!-- 返回按钮 -->
        <button v-if="showBackButton" @click="handleBack" class="group relative flex items-center gap-0.5 px-3 py-1.5 text-gray-600 hover:text-blue-600 transition-all duration-200 h-full">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
          </svg>
          <span class="text-base font-medium">返回</span>
        </button>
        <div v-else class="w-16"></div>

        <!-- 页面标题 -->
        <h1 class="text-xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent flex-1 text-center h-full flex items-center justify-center">{{ currentTitle }}</h1>

        <!-- 右侧占位，保持平衡 -->
        <div class="w-16"></div>
      </div>
    </header>

    <!-- 内容 -->
    <main class="flex-1 min-h-0 pb-20 safe-bottom overflow-y-auto">
      <div class="max-w-6xl mx-auto px-4 py-4">
        <router-view />
      </div>
    </main>

    <!-- 底部导航 -->
    <nav class="safe-bottom fixed bottom-0 inset-x-0 z-30 bg-white/95 backdrop-blur-xl border-t border-gray-200/50 shadow-lg h-16">
      <div class="max-w-6xl mx-auto grid grid-cols-3 h-full">
        <button @click="goTo('/home')" class="group relative flex flex-col items-center justify-center py-2 text-sm transition-all duration-300" :class="isActive('/home') ? 'text-blue-600' : 'text-gray-500 hover:text-gray-700'">
          <div class="relative flex flex-col items-center justify-center h-full pt-3">
            <div class="relative">
              <svg v-if="isActive('/home')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 transform group-hover:scale-110 transition-transform duration-300">
                <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 0 1-1.06 1.06l-.66-.659V19.5A2.25 2.25 0 0 1 17.25 21h-1.5a.75.75 0 0 1-.75-.75V17.25a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75v2.999a.75.75 0 0 1-.75.751H7.5A2.25 2.25 0 0 1 5.25 19.5v-6.568l-.66.66a.75.75 0 1 1-1.06-1.061l8.69-8.69Z"/>
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5 transform group-hover:scale-110 transition-transform duration-300">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m3 9 9-7 9 7v10.5A1.5 1.5 0 0 1 19.5 21h-15A1.5 1.5 0 0 1 3 19.5V9Z"/>
              </svg>
              <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <span class="font-medium text-sm">首页</span>
            <div class="absolute top-0 w-full h-1 bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" :class="{ 'opacity-100': isActive('/home') }"></div>
          </div>
        </button>
        
        <button @click="goTo('/stations')" class="group relative flex flex-col items-center justify-center py-2 text-sm transition-all duration-300" :class="isActive('/stations') ? 'text-blue-600' : 'text-gray-500 hover:text-gray-700'">
          <div class="relative flex flex-col items-center justify-center h-full pt-3">
            <div class="relative">
              <svg v-if="isActive('/stations')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 transform group-hover:scale-110 transition-transform duration-300">
                <path d="M19.5 6h-15v9h15V6Zm-16.5 9v.75A2.25 2.25 0 0 0 5.25 18h13.5A2.25 2.25 0 0 0 21 15.75V15h-18Zm16.5-9V5.25A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25V6h18Z"/>
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5 transform group-hover:scale-110 transition-transform duration-300">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M19.5 6h-15v9h15V6Zm-16.5 9v.75A2.25 2.25 0 0 0 5.25 18h13.5A2.25 2.25 0 0 0 21 15.75V15h-18Zm16.5-9V5.25A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25V6h18Z"/>
              </svg>
              <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <span class="font-medium text-sm">站点</span>
            <div class="absolute top-0 w-full h-1 bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" :class="{ 'opacity-100': isActive('/stations') }"></div>
          </div>
        </button>
        
        <button @click="goTo('/profile')" class="group relative flex flex-col items-center justify-center py-2 text-sm transition-all duration-300" :class="isActive('/profile') ? 'text-blue-600' : 'text-gray-500 hover:text-gray-700'">
          <div class="relative flex flex-col items-center justify-center h-full pt-3">
            <div class="relative">
              <svg v-if="isActive('/profile')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 transform group-hover:scale-110 transition-transform duration-300">
                <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd"/>
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5 transform group-hover:scale-110 transition-transform duration-300">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>
              </svg>
              <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <span class="font-medium text-sm">我的</span>
            <div class="absolute top-0 w-full h-1 bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" :class="{ 'opacity-100': isActive('/profile') }"></div>
          </div>
        </button>
      </div>
    </nav>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const titles = {
  '/home': '首页',
  '/stations': '站点',
  '/profile': '我的',
  '/ranking': '场站排名',
  '/station-detail': '站点详情',
  '/device-management': '设备管理'
}

const currentTitle = computed(() => titles[route.path] || '首页')

const showBackButton = computed(() => {
  // 站点、首页、我的页面不显示返回按钮
  const noBackButtonPaths = ['/home', '/stations', '/profile']
  return !noBackButtonPaths.includes(route.path)
})

const isActive = (path) => {
  return route.path.startsWith(path)
}

const goTo = (path) => {
  router.push(path)
}

const handleBack = () => {
  router.back()
}
</script>